<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import * as echarts from 'echarts';

// echarts图表的容器
let EchartsDiv = ref<HTMLElement>();
onMounted(()=>{
    BindMyChart()
})

const BindMyChart = ()=>{
    // 初始化echarts
    var myChart = echarts.init(EchartsDiv.value);
    myChart.setOption(option)
}
const option = {
  color: ['#80FFA5', '#37A2FF', '#FFBF00'],
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: ['任务创建量', '访问量', '使用量'],
    textStyle: {
        color: '#FFFFFF',
    },
  },
  grid: {
    left: '2%',
    right: '4%',
    bottom: '4%',
    top:"14%",
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      axisLabel:{
        textStyle:{
            color:"#fff"
        }
      },
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel:{
        textStyle:{
            color:"#fff"
        }
      },
    }
  ],
  series: [
    {
      name: '任务创建量',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(128, 255, 165)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [140, 232, 101, 264, 90, 340, 250]
    },
    {
      name: '访问量',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(0, 221, 255)'
          },
          {
            offset: 1,
            color: 'rgb(77, 119, 255)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 282, 111, 234, 220, 340, 310]
    },
    {
      name: '使用量',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(55, 162, 255)'
          },
          {
            offset: 1,
            color: 'rgb(116, 21, 219)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 132, 201, 334, 190, 130, 220]
    }
  ]
};
</script>
<template>
    <div class="dataShow">
        <div class="dataDiagramTitle">
            系统数据统计图
        </div>
        <div class="dataDiagram">
            <div class="echartsDiv" ref="EchartsDiv"></div>
        </div>
    </div>
</template>
<style scoped>
    .dataShow{
        border-radius: 10px;
        position: absolute;
        right: 10px;
        bottom: 20px;
        width: 400px;
        height: 300px;
        background-color: rgb(83,183,244,0.61);
    }
    .dataDiagramTitle{
        width: 100%;
        height: 40px;
        text-align: center;
        line-height: 40px;
        color: #fff;
        font-size: 16px;
    }
    .dataDiagram{
        height: calc(100% - 40px);
        width: 100%;
    }
    .echartsDiv{
        width: 100%;
        height: 100%;
    }
</style>